<template>
  <div class="day-report-container">

    <div class="day-report-search-box">
      <div class="day-report-search-con">
        <div class="report-pre-box" @click="preDay">
          <img src="./pre-icon.png" class="report-pic1" onclick="return false"/>
        </div>

        <datetime format="YYYY-MM-DD" v-model="month" class="report-search-date" :end-date="endDate"
                  @on-confirm="queryMonthReport"></datetime>
        <div class="report-next-box" @click="nextDay">
          <img src="./next-icon.png" class="report-pic2" onclick="return false"/>
        </div>
        <img src="./search.png" class="report-pic3" onclick="return false" @click="openReportSearch"/>
      </div>
    </div>

    <div class="day-report-con-box">
      <div class="day-report-tip" v-show="showReportTip">当日录入{{allNum}}人，尚有{{untNum}}人入职信息未处理</div>

      <div class="day-report-con" ref="wrapper" v-if="showData == 1">
        <div class="day-report-con-list" :class="{'day-report-con-place':!showReportTip}">
          <div class="day-report-con-item" v-for="(report,index) in dayReportList" :key="index">

            <div class="day-report-con-two" v-if="report.mechanismId">
              <div class="report-con-two-user">
                <span class="report-two-user-name">{{report.userName}}</span><span class="report-two-cert-no">{{report.userCardNumber}}</span>
              </div>
              <div class="report-con-two-company">
                <span>厂别：</span><span class="report-company-name">{{report.mechanismName}}</span>
              </div>
              <div class="report-con-two-proxy">
                <div class="origin-tel-box">
                  <div class="origin-text"><span>来源：</span><span class="report-proxy-name">{{report.source | changeEmpOrigin}}</span>
                  </div>
                  <div><span>电话：</span><span class="report-proxy-name">{{report.userTel}}</span></div>
                </div>

                <div class="origin-tel-box">
                  <div class="origin-text"><span>代理人：</span><span class="report-proxy-name proxy-text">{{report.agentName}}</span>
                  </div>
                  <div><span>工价：</span><span
                    class="report-proxy-name">{{report.workMoney?`${report.workMoney}元/时`:''}}</span></div>
                </div>
              </div>


              <button type="button" class="report-two-btn"
                      @click="modifyReportEmp2(report.id,report.mechanismId,report.mechanismName,report.workBeginTime,report.agentName,report.source,report.userTel,report.workMoney)">
                修改
              </button>
            </div>

            <div class="day-report-con-one" v-else>
              <div class="mui-input-row mui-checkbox report-one-checkbox" @click="singleCheck">
                <input name="checkbox" type="checkbox" :value="report.id">
              </div>
              <span class="report-one-user-name">{{report.userName}}</span>
              <span class="report-one-cert-no">{{report.userCardNumber}}</span>
              <button type="button" class="report-one-btn" @click="modifyReportEmp1(report.id)">修改</button>
            </div>

          </div>
        </div>
      </div>
    </div>

    <div class="day-report-empty-wrap" v-if="showData == 2">
      <div class="empty-box">
        <div class="img-box"><img src="../../../assets/img/empty.png" class="empty" onclick="return false"/></div>
        <div class="tip">暂无日输送报表数据~</div>
      </div>
    </div>


    <div class="day-report-batch-box" v-if="showManage">
      <div class="day-report-batch-select">
        <div class="mui-input-row mui-checkbox" @click="checkFull">
          <input name="checkbox" type="checkbox" ref="reportCheckAll">
        </div>
        <span class="report-batch-all">全选</span>
      </div>

      <span class="report-batch-select-num" v-show="number">已选{{number}}条</span>
      <button class="report-batch-cancel-btn" type="button" @click="abrogateCheckReport">取消选择</button>
      <button class="report-batch-manage-btn" type="submit" @click="batchImportEmp">批量管理</button>
    </div>

    <button class="day-report-work-import-btn" type="submit" @click="workEmpImport" v-else>员工录入</button>

    <backpage @backPage="backPage"></backpage>

  </div>
</template>

<script>
  import {Datetime} from 'vux';
  import {formatDate, getDeviceRatio, getNextDate, getYearMonthDay} from "../../../config/util";
  import {baseUrl} from "../../../config/env";
  import BScroll from 'better-scroll';
  import backpage from "../../../components/backpage";

  /*获取当前缩放比*/
  const DEVICE_RATIO = getDeviceRatio();
  /*上拉配置 threshold 触发事件的阀值，即滑动多少距离触发*/
  const UP_CONFIG = {
    threshold: -80 * DEVICE_RATIO,
  };

  export default {
    data() {
      return {
        showData: 0,
        dayReportList: [],
        reportScroll: null,
        currentPage: 1,
        PageSize: 20,
        noMoreData: false,
        userSign: "",
        month: getYearMonthDay(),
        showReportTip: false,
        number: 0,
        untNum: 0,
        allNum: 0,
        showManage: false,
        flag: true,
      }
    },
    created() {
      this.endDate = formatDate(new Date(), "yyyy-MM-dd");
      let base64 = require('js-base64').Base64;
      this.userSign = base64.decode(sessionStorage.getItem("success"));
    },
    mounted() {
      this.queryDayReportList();
    },
    methods: {
      backPage() {
        this.$router.push("/residentIndex");
      },
      singleCheck() {//单选
        this.showManage = true;
        this.$nextTick(() => {
          let allBox = document.getElementsByName('checkbox');
          let checkBox = this.getCheckBoxRes('checkbox');
          if (checkBox.length == allBox.length - 1) {
            this.$refs.reportCheckAll.checked = true;
          } else {
            this.$refs.reportCheckAll.checked = false;
          }
          this.number = checkBox.length;
        });
      },
      abrogateCheckReport() {//取消选择
        this.number = 0;
        this.showManage = false;
        this.flag = true;
        this.selectAll('checkbox', false);
      },
      batchImportEmp() {//批量管理
        let checkList = this.getCheckBoxRes('checkbox');
        if (checkList.length < 1) {
          this.$vux.toast.text("请选择要员工", "middle");
          return;
        }
        this.$router.push({path: "/reportentryinfo", query: {"reportId": checkList.toString(), "batch": 1}});
      },
      getCheckBoxRes(className) {//选择checkbox
        let rdsObj = document.getElementsByName(className);
        let checkVal = new Array();
        let k = 0;
        for (let i = 0; i < rdsObj.length; i++) {
          if (rdsObj[i].checked) {
            if (rdsObj[i].value != "on") {
              checkVal[k] = parseInt(rdsObj[i].value);
            }
            k++;
          }
        }
        return checkVal;
      },
      checkFull() {//全选
        if (this.flag) {
          this.flag = false;
          this.selectAll('checkbox', true);
          let checkBox = this.getCheckBoxRes('checkbox');
          this.number = checkBox.length;
        } else {
          this.flag = true;
          this.selectAll('checkbox', false);
          this.number = 0;
        }
      },
      queryMonthReport(value) {//根据时间查询
        this.currentPage = 1;
        this.PageSize = 20;
        this.showReportTip = false;
        this.month = value;
        this.queryDayReportList(() => {
          this.$nextTick(() => {
            this.reportScroll = null;
            this.noMoreData = false;
            this.initScroll();
          });
        });
      },
      queryDayReportList(callback) {
        this.$vux.loading.show({
          text: '加载中',
        });

        let time = (new Date()).getTime();
        let url = baseUrl + "/resident/get_daily_report_list?timestamp=" + time;
        let param = {"sgin": this.userSign, "timestamp": time};
        let signature = this.$signature(url, param);

        this.axios.get(baseUrl + "/resident/get_daily_report_list?sgin=" + this.userSign + "&time=" + this.month + "&key=" + "&page=" + this.currentPage + "&size=" + this.PageSize + "&auth=" + signature + "&timestamp=" + time).then((res) => {
          let resultObj = res.data;
          this.$vux.loading.hide();
          if (resultObj.code == 0 && resultObj.data != null) {
            this.untNum = resultObj.data.untNum;
            this.allNum = resultObj.data.allNum;

            if (resultObj.data.list.length > 0) {
              this.showData = 1;
              this.selectAll("checkbox", false);
              this.showReportTip = true;
              this.dayReportList = resultObj.data.list;

              if (callback) {
                callback();
              }
              this.$nextTick(() => {
                this.initScroll();
                this.reportScroll.on('touchEnd', (pos) => {
                  if (Math.abs(Math.round(pos.y)) > Math.abs(Math.round(this.reportScroll.maxScrollY + 1))) {
                    this.loadMore();
                  }
                });
              });
            } else {
              this.showData = 2;
            }
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
          }
        }).catch((error) => {
          this.$vux.loading.hide();
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      selectAll(className, flag) {//全选/全不选
        let loves = document.getElementsByName(className);
        for (let i = 0; i < loves.length; i++) {
          loves[i].checked = flag;
        }
      },
      openReportSearch() {
        this.$router.push("/reportsearch");
      },
      workEmpImport() {
        this.$router.push("/reportimport");
      },
      preDay() {//前一天
        this.currentPage = 1;
        this.PageSize = 20;
        this.showReportTip = false;
        this.month = getNextDate(this.month, -1);
        this.queryDayReportList(() => {
          this.$nextTick(() => {
            this.reportScroll = null;
            this.noMoreData = false;
            this.initScroll();
          });
        });
      },
      nextDay() {//后一天
        if (this.month == getYearMonthDay()) {
          return;
        }
        this.currentPage = 1;
        this.PageSize = 20;
        this.showReportTip = false;
        this.month = getNextDate(this.month, 1);
        this.queryDayReportList(() => {
          this.$nextTick(() => {
            this.reportScroll = null;
            this.noMoreData = false;
            this.initScroll();
          });
        });
      },
      loadMore() {//加载更多
        if (!this.noMoreData) {
          this.$vux.loading.show({
            text: '加载中',
          });

          let time = (new Date()).getTime();
          let url = baseUrl + "/resident/get_daily_report_list?timestamp=" + time;
          let param = {"sgin": this.userSign, "timestamp": time};
          let signature = this.$signature(url, param);

          setTimeout(() => {
            this.axios.get(baseUrl + "/resident/get_daily_report_list?sgin=" + this.userSign + "&time=" + this.month + "&key=" + "&page=" + (++this.currentPage) + "&size=" + this.PageSize + "&auth=" + signature + "&timestamp=" + time).then((res) => {
              let resultObj = res.data;
              if (resultObj.code == 0) {
                if (resultObj.data.list.length > 0) {
                  this.dayReportList = this.dayReportList.concat(resultObj.data.list);
                } else {
                  this.noMoreData = true;
                }
                this.$vux.loading.hide();
              } else {
                this.$vux.loading.hide();
                this.$vux.toast.text(resultObj.msg, "middle");
              }
            })
          }, 500)
        }
      },
      initScroll() {//初始化BScroll
        if (!this.reportScroll) {
          this.reportScroll = new BScroll(this.$refs.wrapper, {
            probeType: 3,
            deceleration: 0.003,
            bounce: false,
            swipeTime: 2000,
            click: true,
            pullUpLoad: UP_CONFIG
          });
        } else {
          this.reportScroll.refresh();
        }
      },
      enable() {
        this.reportScroll && this.reportScroll.enable()
      },
      refresh() {
        this.reportScroll && this.reportScroll.refresh()
      },
      finishPullUp() {
        this.reportScroll && this.reportScroll.finishPullUp()
      },
      modifyReportEmp1(reportId) {
        this.$router.push({path: "/reportentryinfo", query: {"reportId": reportId}});
      },
      modifyReportEmp2(reportId, mechanismId, mechanismName, workBeginTime, agentName, source, userTel, workMoney) {
        this.$router.push({
          path: "/reportentryinfo", query: {
            "reportId": reportId,
            "mechanismId": mechanismId,
            "mechanismName": mechanismName,
            "workBeginTime": workBeginTime,
            "agentName": agentName,
            "source": this.changeOrigin(source),
            "userTel": userTel,
            "workMoney": workMoney,
          }
        });
      },
      changeOrigin(value) {//员工来源
        if ("DH" == String(value)) {
          return "大和";
        } else if ("LP" == String(value)) {
          return "蓝聘";
        } else if ("SS" == String(value)) {
          return "上势";
        } else {
          return "大赢和";
        }
      }
    },
    watch: {
      dayReportList() {
        this.$nextTick(() => {
          this.reportScroll.refresh();
        })
      }
    },
    components: {
      Datetime,
      BScroll,
      backpage,
    },
    filters: {
      changeEmpOrigin(value) {
        if ("DH" == value) {
          return '大和';
        } else if ("LP" == value) {
          return '蓝聘';
        } else if ("SS" == value) {
          return '上势';
        } else if ("DYH" == value) {
          return '大赢和';
        }
      }
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../../assets/stylus/mixin.styl"
  @import "../../../../static/mui.min.css"

  .day-report-container
    wh(100%, auto)
    background: #FFF
    .day-report-search-box
      position: fixed
      top: 0
      z-index: 99
      wh(100%, 1.2rem)
      background: #3CAFFF
      .day-report-search-con
        position: relative
        wh(100%, 1.2rem)
        fj(center, center)
        .report-pre-box
          fj(center, center)
          wh(0.6rem, 0.6rem)
          .report-pic1
            wh(0.4rem, 0.4rem)
        .report-search-date
          padding-left: 0.32rem
          padding-right: 0.32rem
          size-color(0.427rem, #FFF)
        .report-search-date >>> .weui-cell__ft
          color: #FFF
        .report-search-date >>> .weui-cell__ft .vux-cell-value
          color: #FFF
        .report-next-box
          fj(center, center)
          wh(0.6rem, 0.6rem)
          .report-pic2
            wh(0.4rem, 0.4rem)
      .report-pic3
        position: absolute
        right: 0.32rem
        wh(0.533rem, 0.533rem)
    .day-report-con-box
      position: fixed
      top: 1.2rem
      wh(100%, auto)
      bottom: 1.28rem
      z-index: 88
      .day-report-tip
        position: absolute
        top: 0
        wh(100%, 0.8rem)
        text-align: center
        line-height: 0.8rem
        background: #FFA94C
        size-color(0.373rem, #FFF)
      .day-report-con
        position: absolute
        top: 0.8rem
        bottom: 0
        wh(100%, auto)
        overflow: hidden
        .day-report-con-list
          wh(100%, auto)
          .day-report-con-item
            display: flex
            flex-direction column
            wh(100%, auto)
            .day-report-con-one
              display: flex
              align-items: center
              wh(100%, 1.6rem);
              border-bottom: 0.027rem solid #F5F5F5
              .report-one-checkbox
                padding-left: 0.32rem
                padding-right: 0.32rem
              .report-one-user-name
                size-color(0.427rem, #333)
                font-weight: 500
                padding-right: 0.32rem
              .report-one-cert-no
                size-color(0.373rem, #666)
              .report-one-btn
                margin-left: auto
                margin-right: 0.32rem
                wh(1.6rem, 0.8rem)
                text-align: center
                line-height: 0.4rem
                border: 0.027rem solid #3CAFFF
                border-radius: 0.16rem
                size-color(0.4rem, #3CAFFF)
            .day-report-con-two
              display: flex
              flex-direction: column
              wh(100%, 3.2rem)
              position: relative
              border-bottom: 0.027rem solid #F5F5F5
              .report-con-two-user
                display: flex
                align-items: center
                padding-top: 0.4rem
                padding-left: 0.32rem
                padding-bottom: 0.4rem
                .report-two-user-name
                  size-color(0.427rem, #333)
                  font-weight: 500
                .report-two-cert-no
                  padding-left: 0.32rem
                  size-color(0.373rem, #666)
              .report-con-two-company
                display: flex
                align-items: center
                padding-bottom: 0.267rem
                padding-left: 0.32rem
                size-color(0.373rem, #999)
                .report-company-name
                  padding-top: 0.05rem
                  ellipsis()
                  width: 8.25rem
                  color: #666
              .report-con-two-proxy
                display flex
                padding-left: 0.32rem
                size-color(0.373rem, #999)
                .report-proxy-name
                  color: #666
                .proxy-text
                  width: 4rem
                  ellipsis()
                .origin-tel-box
                  display: flex
                  flex-direction: column
                  &:first-child
                    width: 4rem
                  .origin-text
                    display flex
                    padding-bottom: 0.28rem

              .report-two-btn
                position: absolute
                right: 0.32rem
                top: 0.4rem
                wh(1.6rem, 0.8rem)
                text-align: center
                line-height: 0.4rem
                border: 0.027rem solid #3CAFFF
                border-radius: 0.16rem
                size-color(0.4rem, #3CAFFF)
        .day-report-con-place
          top: 0
    .day-report-work-import-btn
      position: fixed
      bottom: 0
      z-index: 99
      text-align: center
      border: 0
      wh(100%, 1.28rem)
      background: #3CAFFF
      size-color(0.453rem, #FFF)
    .day-report-batch-box
      position: fixed
      bottom: 0
      z-index: 99
      wh(100%, 1.28rem)
      background: #FFF
      border-top: 0.027rem solid #f5f5f5
      display: flex
      align-items: center
      .day-report-batch-select
        padding-left: 0.32rem
        padding-right: 0.32rem
        display: flex
        align-items: center
        .report-batch-all
          padding-left: 0.32rem
          size-color(0.427rem, #333)
      .report-batch-select-num
        size-color(0.427rem, #3CAFFF)
      .report-batch-cancel-btn
        margin-left: auto
        wh(2.667rem, 1.28rem)
        background: #FFF
        border: 0
        size-color(0.4rem, #999)
      .report-batch-manage-btn
        wh(2.667rem, 1.28rem)
        background: #3CAFFF
        border: 0
        size-color(0.453rem, #FFF)
    .day-report-empty-wrap
      fj(center, center)
      wh(100%, auto)
      position: fixed
      top: 0
      left: 0
      right: 0
      bottom: 0
      z-index: -1
      .empty-box
        wh(4.773rem, auto)
        .img-box
          wh(100%, 4.773rem)
          .empty
            wh(100%, 100%)
        .tip
          display: flex
          justify-content: center
          margin-top: 0.387rem
          size-color(0.373rem, rgba(68, 68, 68, 1))
</style>
